//多列表组件    

<template>
  <el-card class="box-card">

    <div class="card-header">
      <el-container style="width: 100%;">

        <el-container style="width:90%;height: 100%;">
          <el-header height="80">
            <el-row :gutter="20" style="margin-left: 0;margin-top:15px;">
              <el-col :span="5">
                <div class="grid-content ep-bg-purple" />任务名称：{{ itemv.taskName }}
              </el-col>
              <el-col :span="5">
                <div class="grid-content ep-bg-purple" />域名链接：{{ itemv.domainUrls }}
              </el-col>
              <el-col :span="10">
                <div class="grid-content ep-bg-purple" />关键词：{{ itemv.keywords }}
              </el-col>
            </el-row>
          </el-header>
          <el-main height="80">
            <el-row :gutter="20" style="margin-left:0;margin-top:15px;">
              <el-col :span="5">
                <div class="grid-content ep-bg-purple" />更新模式：
                <el-select v-model="value1" class="m-2" placeholder="Select" size="small">
                  <el-option v-for="item in options.optionsRenew" :key="item.value" :label="item.label"
                    :value1="item.value" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :span="5">
                <div class="grid-content ep-bg-purple" />优先级：
                <el-select v-model="value2" class="m-2" placeholder="Select" size="small">
                  <el-option v-for="item in options.optionsPriority" :key="item.value" :label="item.label"
                    :value2="item.value" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :span="3">
                <div class="grid-content ep-bg-purple" />爬取深度：{{ itemv.crawlingDepth }}
              </el-col>
              <el-col :span="3">
                <div class="grid-content ep-bg-purple" />爬取频率：{{ itemv.crawlingFrequency }}
              </el-col>
              <el-col :span="4">
                <div class="grid-content ep-bg-purple" />运行状态：<span :class="itemv.taskState ? 'a' : 'b'"
                  style="float:right;margin-right: 50px;">{{ itemv.taskState ? "运行中" : "未运行" }}</span>
              </el-col>

            </el-row>
          </el-main>
          <el-footer height="20" style="margin-bottom: 80px;">
            <el-divider content-position="left"></el-divider>
          </el-footer>

        </el-container>

        <el-main direction="vertical" style="margin-right: 0%;width: 7%;padding-right: 0%;height: 100%;">
          <el-button :type="itemv.taskState ? 'warning' : 'primary'" @click="pauseDialogVisible = true">{{ itemv.taskState
            ? "暂停" :
            '运行' }}</el-button>
          <el-button type="danger" style=" margin-left:0;margin-top: 10px;" @click="dialogVisible = true">删除</el-button>
          <el-button text @click="checkLog()" style="float: right; margin-top:30px;margin-right:0; " size="small"
            v-popover:popover>查看更新日志</el-button>
        </el-main>

      </el-container>
    </div>
    <el-popover ref="popover" placement="right" title="2023/9/3 日志" width="220" height="300" trigger="click" content="测试日志
            ">
    </el-popover>




    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>是否删除该爬虫任务</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="taskDelete(index)">删 除</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="pauseDialogVisible" width="30%" :before-close="handleClose">
      <span>是否{{ itemv.taskState ? "运行" : '暂停' }}该爬虫任务</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pauseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="taskPause(itemv.taskState)">{{ itemv.taskState ? "运 行" :
          '暂 停' }}</el-button>
      </span>
    </el-dialog>


  </el-card>
</template>

<script>
export default {
  name: 'ComponentsList',

  props: {
    item: {
      type: Object,
      required: true,
      default: function () {
        return {};
      }
    },
    options: {
      type: Object,
      required: true,
      default: function () {
        return {};
      },
    },
    index: {
      type: Number,
      default: 0

    }
  },
  data() {
    return {
      value1: '',
      value2: '',
      dialogVisible: false,
      pauseDialogVisible: false,
      itemv: this.$props.item,

    }
  },
  mounted() {
    console.log(this.$props.options);
  },
  methods: {
    taskPause(flag) {  //这里后面要把state数据修改至后台数据库  0为暂停  1为运行
      if (flag) {
        this.itemv.taskState = 0
      } else {
        this.itemv.taskState = 1
      }
      this.pauseDialogVisible = false
    },
    taskDelete(index) {
      this.$emit("deletS", index)
      this.dialogVisible = false
      console.log(this.itemv);
      this.post('domainCrawling/stopTask', String(this.itemv.crawlingTaskID))

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    async post(url, TaskID) {
      this.$axios.get(url,
        {
          params: {
            crawlingTaskID: TaskID
          }
        }

      ).then((res) => {
        console.log(res.data);
      })
    }
  }
}



</script>

<style>
.box-card {
  width: 1350PX;
  height: 220px;
  text-align: left;
}

/* .card-header{

    } */
</style>